<template>
  <div class="member-wrapper">
    <Header :title="'我的会员'" />
    <div class="content-wrapper">
      <div class="user-info">
        <Avatar :avatar="avatar" :asize="'big'" />
        <span class="name">{{ account }}</span>
        <span class="vip">你还不是会员(快点开通)</span>
      </div>
      <div class="saving">开通会员，每年可省: ￥9999元</div>
      <div class="open-vip-box">
        <div class="vip-price-box">
          <div
            class="vip-price-item"
            v-for="(item, index) in vipProductsList"
            @click="selectCurrentProduct(index,item)"
            :class="currentSelectIndex===index?'selected':''"
          >
            <!-- <span>{{index}}</span> -->
            <span class="title">{{ item.subGroupName }}</span>
            <span class="price">￥: {{ item.data.price }}元</span>
            <span class="discount">折扣￥{{ item.data.reduced ||0 }}</span>
            <span v-if="item.data.recom" :style="{color:'#f93684',border:'1px solid',width:'60px',height:'30ox'}" >推荐</span>
          </div>
        </div>
        <div class="open-vip">
          <button class="open-vip-btn">狠狠的开会员{{totalPrice}}原石</button>
          <span style="font-size: 16px; display: block"
            >开通即视为同意
            <el-link
              :style="{
                fontSize: '16px',
                color: '#f93684',
                'text-decoration': 'none',
              }"
              to=""
              >《会员服务协议》</el-link
            ></span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "member",
});
</script>

<script setup lang="ts">
import Header from "../components/header.vue";
import { getVipInfoApi } from "@/api/mine/mine";
import type { Datum } from "@/api/mine/interface/vipInfoApi";
import { useMineStore } from "@/store/mine/mine";
import { ref, onMounted, reactive } from "vue";
import { storeToRefs } from "pinia";
import Avatar from "../components/avatar.vue";

const mineStore = useMineStore();

const { data } = storeToRefs(mineStore);
const account = ref<string>();
const avatar = ref<string>();
account.value = data.value?.account;
avatar.value = data.value?.avatar;
interface vipType {
  id: string;
  subGroupName: string;
  data: dataType;
}
interface dataType {
  price: number;
  reduced: string;
}
// vip 套餐列表
// const vipProductsList = ref<Datum[] | vipType[]>([
//   {
//     id: "123",
//     subGroupName: "1一年会员",
//     data: {
//       price: 999,
//       reduced: "9.9/月",
//     },
//   },
// ]);
const vipProductsList = ref<Datum[]>()

// 当前选择套餐
const currentSelectVipProducts = ref();
onMounted(async () => {
  console.log("member page onMounted");
  console.log("data", data);
  try {
    const result = await getVipInfoApi();
    console.log("vip", result);
    vipProductsList.value = result as Datum[];
  } catch (error) {}
});

// 选择高亮
const currentSelectIndex = ref(-1);
const totalPrice=ref(0)
// 切换
const selectCurrentProduct = (index: number,item:any) => {
  currentSelectIndex.value = index;
  totalPrice.value = item.data.total_price
};
</script>

<style lang="less" scoped>
.member-wrapper {
  .content-wrapper {
    background-color: #fff;
    border-radius: 4px;
    padding: 15px;
    .user-info {
      text-align: center;
      .avatar {
        margin: 0 auto;
        display: inline-block;
        width: 100px;
        height: 100px;
        border-radius: 100%;
        background-color: #eee;
        background-size: cover;
        background-position: 50%;
        background-repeat: no-repeat;
        border: solid 1px #f5f7f9;
        box-shadow: 1px black;
      }
      .name {
        font-size: 20px;
      }
      .vip {
        font-size: 14px;
        color: #f936a4;
      }
    }
    .saving {
      text-align: center;
      font-size: 20px;
    }
    .open-vip-box {
      margin-top: 30px;
      text-align: center;
      .vip-price-box {
        display: flex;
        // flex-direction: row;
        flex-wrap: wrap;
        width: 720px;
        height: 360px;
        margin: 0 auto;
        .vip-price-item {
          box-sizing: border-box;
          width: 220px;
          height: 150px;
          display: flex;
          flex-direction: column;
          border: 1px solid #b1b5c1;
          border-radius: 6px;
          text-align: center;
          padding: 10px;
          justify-content: space-between;
          cursor: pointer;
          margin-right: 20px;
          .title {
            font-size: 16px;
          }
          .price {
            font-size: 32px;
          }
          .discount {
            font-size: 16px;
          }
        }
        // 选中
        .selected{
          border-color: #f936a4;
          color: #f936a4;
        }
      }
      .open-vip-btn {
        width: 330px;
        height: 56px;
        font-size: 16px;
        margin: 30px auto 12px;
        border-radius: 10px;
        background: linear-gradient(-56deg, #ff4683, #ff638f);
        color: #fff;
        cursor: pointer;
      }
    }
  }
}
</style>
